<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- 若您需要使用Kendo UI Professional，请联系版权人获得合法的授权或许可。 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bk-icon-2.0/iconfont.css" rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/components/form.css" rel="stylesheet">
    <!--蓝鲸提供的公用样式库 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/bk.css" rel="stylesheet">
    <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/bk/js/bk.js"></script>
    <!-- 数据埋点统计 -->
    <script src="http://magicbox.bk.tencent.com/static_api/analysis.js"></script>
</head>

<body>
    <!--HTML-->
    <p class="magic-desc">基础元素</p>
    <form class="bk-form" style="width:600px;" id="validate_form">
        <div class="bk-form-item">
            <label class="bk-label" style="width:150px;">手机号码</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <input type="text" class="bk-form-input" name="validation_name" placeholder="请输入手机号码">
            </div>
            <div class="bk-form-tip">
                <span class="bk-badge">
                    <i class="bk-icon icon-info"></i>
                </span>
            </div>
        </div>
        <div class="bk-form-item">
            <label class="bk-label" style="width:150px;">昵称</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <input type="text" class="bk-form-input" placeholder="请输入昵称">
            </div>
        </div>
        <div class="bk-form-item">
            <label class="bk-label" style="width:150px;">性别</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <label class="bk-form-radio">
                    <input type="radio" name="radio1" checked="checked">
                    <i class="bk-radio-text">男</i>
                </label>
                        <label class="bk-form-radio">
                    <input type="radio" name="radio1">
                    <i class="bk-radio-text">女</i>
                </label>
                        <label class="bk-form-radio">
                    <input type="radio" name="radio1" disabled="disabled">
                    <i class="bk-radio-text">未知</i>
                </label>
            </div>
        </div>
        <div class="bk-form-item">
            <label class="bk-label" style="width:150px;">城市</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <select name="validation_select" class="bk-form-select">
                    <option value="beijing">北京</option>
                    <option value="shanghai">上海</option>
                    <option value="guangzhou">广州</option>
                    <option value="shenzhen">深圳</option>
                </select>
            </div>
        </div>
        <div class="bk-form-item">
            <label class="bk-label" style="width:150px;">简介</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <textarea name="" id="" class="bk-form-textarea" placeholder=""></textarea>
            </div>
        </div>
        <div class="bk-form-item bk-form-action">
            <div class="bk-form-content" style="margin-left:150px;">
                <a class="bk-button bk-primary" id="submit" title="保存">
                    <span>保存</span>
                </a>
                <a class="bk-button" title="取消">
                    <span>取消</span>
                </a>
            </div>
        </div>
    </form>

    <p class="magic-desc">元素状态</p>
    <form class="bk-form" style="width:600px;" id="validate_form">
        <div class="bk-form-item is-required">
            <label class="bk-label" style="width:150px;">必填效果</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <input type="text" class="bk-form-input" name="validation_name" placeholder="请输入手机号码">
                <div class="bk-form-tip">
                    <p class="bk-tip-text">请输入11位手机号码</p>
                </div>
            </div>
        </div>
        <div class="bk-form-item">
            <label class="bk-label" style="width:150px;">错误效果</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <input type="text" class="bk-form-input is-danger" name="validation_name" placeholder="请输入手机号码">
                <div class="bk-form-tip">
                    <p class="bk-tip-text">请输入11位手机号码</p>
                </div>
            </div>
        </div>
        <div class="bk-form-item">
            <label class="bk-label" style="width:150px;">成功效果</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <input type="text" class="bk-form-input is-success" name="validation_name" placeholder="请输入手机号码" value="12345678911">
                <div class="bk-form-tip">
                    <div class="bk-badge bk-success">
                        <i class="bk-icon icon-check-1"></i>
                    </div>
                    <p class="bk-tip-text">合法</p>
                </div>
            </div>
        </div>
        <div class="bk-form-item">
            <label class="bk-label" style="width:150px;">禁用效果</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <input type="text" class="bk-form-input" disabled name="validation_name" placeholder="请输入手机号码" value="12345678911">
                <div class="bk-form-tip">
                    <p class="bk-tip-text">不可输入</p>
                </div>
            </div>
        </div>
        <div class="bk-form-item bk-form-action">
            <div class="bk-form-content" style="margin-left:150px;">
                <a class="bk-button bk-primary" id="submit" title="保存">
                    <span>保存</span>
                </a>
                <a class="bk-button" title="取消">
                    <span>取消</span>
                </a>
            </div>
        </div>
    </form>
    
</body>

</html>